<template>

<div class="loginBox">
	<div  class="signin">
		<div class="loginHtml" v-show="loginType=='login'">
			<h1 class="loginTitle">Account sign in</h1>
			<div class="signupTip">Don't have an account? <a @click="loginType='reg'">Sign up for free</a></div>
			<el-form>
				<el-form-item  prop="username">
					<el-input v-model="loginForm.username" placeholder="Username,Email or Mobile" size="large"></el-input>
				</el-form-item>
				<el-form-item  prop="password">
					<el-input v-model="loginForm.password" placeholder="Password" size="large"></el-input>
				</el-form-item>
				<el-form-item style="margin-bottom: 10px">
					<el-button @click="loginCheck()" style="width: 100%" type="primary" round   size="large">Sign in</el-button>
				</el-form-item>
				<div class="or"><span>or</span></div>
				<el-form-item>
					<el-button style="width: 100%" round  @click="" size="large" class="loginThird">
						<img src="@/assets/wechat.png"/> Login in with WeChat
						</el-button>
				</el-form-item>
				<el-form-item>
					<el-button style="width: 100%"  class="loginThird" round  @click="" size="large"><img src="@/assets/google.png"/> Login in with Google</el-button>
				</el-form-item>
			</el-form>
		</div>
		<div class="loginHtml" v-show="loginType=='reg'">
			<h1 class="loginTitle">Create an account</h1>
			<div class="signupTip">Already have an account? <a @click="loginType='login'">Login</a></div>
			<el-form>
				<el-form-item  prop="username">
					<el-input placeholder="Email" size="large"></el-input>
				</el-form-item>
				<el-form-item  prop="emailCode" >
					<el-input placeholder="Verification code" size="large" >
						      <template #append>
						        	<el-button round  @click="" size="large">Send code</el-button>
						      </template>
					</el-input>
				
				</el-form-item>
				<el-form-item  prop="password">
					<el-input placeholder="Password" size="large"></el-input>
				</el-form-item>
				<el-form-item style="margin-bottom: 10px">
					<el-button style="width: 100%" type="primary" round  @click="" size="large">Sign up</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>
</div>

</template>
<script setup>
import { ref, reactive } from 'vue';
// 引入 inject 函数
import { inject } from 'vue';
import { ElMessage } from 'element-plus';
import axios from 'axios';

// 从全局状态中注入 'config'
const config = inject('config');
const loginType = ref("login");
const loginForm = reactive({
  username: '',
  password: ''
});


function loginCheck(){
	// 发送 POST 请求
	axios.post(config.apiUrl+"/2/check",loginForm)
	.then(response => {
	  let resp=response.data;
	  if(resp.code!=20000){
		  ElMessage.error(resp.msg);
	  }
	})
	.catch(error => {
	  ElMessage.error(error.response || error.message);
	});
}
</script>

<style>
.loginBox{
	width: 100%;
	height: 100%;
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f8f9fa;
	padding: 10px;
}
.signin{
	width: 100%;
	max-width: 380px;
}
.signin .loginTitle{
	font-size: 30px;
	margin: 0px 0px 15px 0px;
	text-align: center;
}
.signupTip{
	margin: 20px 0px;
	text-align: center;
	color: #515a6e;
}
.signupTip a{
	cursor: pointer;
	color: #337ecc;
}
.or{
	display: flex;
	align-items: center;
	text-align: center;
	margin-bottom: 10px;
}
.or::after, .or::before {
	content: "";
	border: 1px solid #dcdee2;
	flex: 1 1 0%;
	margin:0px 10px;
}
.or span{
	transition: all 300ms ease 0s;
	font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
	margin: 0px;
	color: rgb(163, 165, 183);
	font-size: 14px;
	line-height: 20px;
	font-weight: 400;
}
.loginThird span{
    display: flex;
    justify-content: center;
    align-items: center;
}
.loginThird img{
	width: 20px;
	margin-right: 10px;
}
</style>